<template>
  <el-container direction="vertical">
    <el-header class="center-big">加入会议</el-header>
    <el-main>
      <div id="center-card">
        <p>请输入房间号：</p>
        <el-input
          v-model="room_id"
          placeholder="房间号"
          id="input-roomid"
        ></el-input>
        <el-button type="primary" @click="join_meeting">加入会议</el-button>
      </div>
    </el-main>
  </el-container>
</template>

<script lang="ts">
import { defineComponent, ref, Ref } from "vue";
import router from "../router";

export default defineComponent({
  setup() {
    const room_id: Ref<string> = ref("");

    const join_meeting = () => {
      console.log("join in room: " + room_id.value);
      // router.push("/meeting/" + room_id.value);
      router.push({
        name: "meeting",
        params: { id: room_id.value },
      });
    };

    return { room_id, join_meeting };
  },
});
</script>

<style>
#input-roomid {
  max-width: 200px;
  margin: 30px;
}
</style>